<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>视频首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="full-screen" content="true" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="360-fullscreen" content="true" />
		<script src="https://jbx.jbxiong.com/jquery-3.2.1.min.js"></script>
		<link href="css/video-js.min.css" rel="stylesheet">
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="js/sharejs5.js"></script>
		<style>
			.bg-img{
				height: 100vh;
				width: 100%;
				background-image: url(img/v_3.png);
				background-repeat: no-repeat;
				background-position: center;
			}
			html,body {
				background-color: #f6f2ec;
			}
			body{margin: 0;padding: 0;background-color: #FFFFFF;}
			.m{margin-left: auto; margin-right: auto; margin-top: 50vw;display: none;position: absolute;z-index: 1;width: 100%;height: 100%;}
			.my-video{margin: 0;padding: 0;}
			
		</style>
	</head>
	<body>
		
		<div class="m" id="video_div">
			<video id="my-video" class="video-js" controls isAutoPlay="false" preload="auto" width="100%" x5-video-player-type="h5" x5-video-player-fullscreen="true">
				<source id="my-video_html5_api" src="http://cdn.jichuancy.com/brand_1_1.mp4" type="video/mp4">
			  </video>
		</div>
		
		<div class="front" style="position: absolute;top: 0;left: 0;width: 100%;">
			<img src="img/v_3.png" style="width: 100%;" />
			<!-- <div style="position: relative;">
				<img src="img/v_3.png" style="width: 100%;" />
			</div>
			
			<div style="position: relative;top: -130vw;">
				<img src="img/v_4.png" style="width: 100%;" />
			</div> -->
			
			<div style="position: absolute;top: 27vw;left: 0;;width: 100%;">
				<img src="img/5_1.png" style="width: 100%;" />
			</div>
			
			<div style="position: absolute;top: 36vw;left: 0;;width: 100%;">
				<img src="img/5_2.png" style="width: 100%;" onclick="play_video_3()" />
			</div>
			
			<div style="position: absolute;top: 90vw;left: 0;;width: 100%;">
				<img src="img/v_4.png" style="width: 100%;" />
			</div>
			
			<div style="position: absolute;top: 99vw;left: 0;;width: 100%;">
				<img src="img/v_1.png" style="width: 100%;" onclick="play_video_1()" />
			</div>
			
			
			<div style="position: absolute;top: 153vw;left: 0;;width: 100%;">
				<img src="img/v_5.png" style="width: 100%;" />
			</div>
			
			<div style="position: absolute;top: 162vw;left: 0;;width: 100%;">
				<img src="img/v_2.png" style="width: 100%;" onclick="play_video_2()" />
			</div>
		</div>
		
		<script>
			SetShareMsg('','','','',0);
			function play_video_1(){
			    console.log('play...');
			 //    var cur_video_div = document.getElementById("video_div");
			 //    cur_video_div.style.display = 'block';
				// document.getElementById('my-video_html5_api').src = 'http://cdn.jichuancy.com/brand1.mp4';
			 //    var myPlayer = videojs('my-video');
				// // myPlayer.src = 'http://cdn.jichuancy.com/brand1.mp4';
			 //    myPlayer.play();
				
				document.getElementById('my-video').src = 'http://cdn.jichuancy.com/brand_2_1.mp4';
				var cur_video_div = document.getElementById("video_div");
				cur_video_div.style.display = 'block';
				document.getElementById("my-video").play();
				$(".front").hide();
				$(".m").show();
				$("body").css("background-color","#000000");
				document.getElementById("my-video").addEventListener('pause',function(){  
					$(".front").show();
					$(".m").hide();
					$("body").css("background-color","#f6f2ec");
				})
			}
			
			function play_video_2(){
			    console.log('play...');
			 //    var cur_video_div = document.getElementById("video_div");
			 //    cur_video_div.style.display = 'block';
				// document.getElementById('my-video_html5_api').src = 'http://cdn.jichuancy.com/brand2.mp4';
			 //    var myPlayer = videojs('my-video');
				// // myPlayer.src = 'http://cdn.jichuancy.com/brand2.mp4';
			 //    myPlayer.play();
				
				document.getElementById('my-video').src = 'http://cdn.jichuancy.com/brand_1_1.mp4';
				var cur_video_div = document.getElementById("video_div");
				cur_video_div.style.display = 'block';
				document.getElementById("my-video").play();
				$(".front").hide();
				$(".m").show();
				$("body").css("background-color","#000000");
				document.getElementById("my-video").addEventListener('pause',function(){  
					$(".front").show();
					$(".m").hide();
					$("body").css("background-color","#f6f2ec");
				})
			}
			
			function play_video_3(){
			    console.log('play...');
				document.getElementById('my-video').src = 'http://cdn.jichuancy.com/brand_avthumb';
				var cur_video_div = document.getElementById("video_div");
				cur_video_div.style.display = 'block';
				document.getElementById("my-video").play();
				$(".front").hide();
				$(".m").show();
				$("body").css("background-color","#000000");
				document.getElementById("my-video").addEventListener('pause',function(){  
					$(".front").show();
					$(".m").hide();
					$("body").css("background-color","#f6f2ec");
				})
			}
			
			
			
			function start_set(){
			    var cur_video_div = document.getElementById("video_div");
			    var cur_video = document.getElementById("video");
			    var imgBtn = document.getElementById("img_btn");
			    console.log('clientHeight='+document.body.clientHeight);
			    console.log('clientWidth='+document.body.clientWidth);
			
			    console.log('clientHeight='+window.screen.height);
			    console.log('clientWidth='+window.screen.width);
			    
			    console.log('document.body.offsetHeight='+document.body.offsetHeight);
			
			    var scales = document.body.clientHeight/document.body.clientWidth;
			    console.log('scales='+scales);
				
			    cur_video_div.style.height = (100*scales).toString() +"vw";
			    cur_video.style.height = (100*scales).toString() +"vw";
			}
			
			
			function back_video(){
			    var cur_video_div = document.getElementById("video_div");
			    var cur_video = document.getElementById("video");
			    cur_video.pause();
			}
			
			function video_click(){
			    console.log('video_click...');
			    var imgbtn = document.getElementById("img_btn");
			    imgbtn.style.zIndex = 200;
			}
				
		</script>
		
	</body>
</html>
